<template>
  <div class="seller" ref='seller'>
    <div class='seller-content'>
      <div class='overview'>
        <h1 class='title'>{{seller.name}}</h1>
        <div class='desc'>
          <star :size='36' :score='seller.score'></star>
          <span class='text'>({{seller.ratingCount}})</span>
          <span class='text'>月售{{seller.sellCount}}单</span>
        </div>
        <ul class='remark'>
          <li class='block'>
            <h2>起送价</h2>
            <div class='content'>
              <span class='stress'>{{seller.minPrice}}</span>元
            </div>
          </li>
          <li class='block'>
            <h2>商家配送</h2>
            <div class='content'>
              <span class='stress'>{{seller.deliveryPrice}}</span>元
            </div>
          </li>
          <li class='block'>
            <h2>平均配送时间</h2>
            <div class='content'>
              <span class='stress'>{{seller.deliveryTime}}</span>分种
            </div>
          </li>
        </ul>
        <div class='favorite' @click='toggleFavorite'>
          <span class='icon-favorite' :class="{'active':favorite}"></span>
          <span class='text'>{{favorite?'收藏':'未收藏'}}</span>
        </div>
      </div>
      <split></split>
      <div class='bulletin'>
        <h1 class='title'>公告与活动</h1>
        <div class='content-wrapper'>
          <p class='content'>{{seller.bulletin}}</p>
        </div>
        <ul
          v-if="seller.supports"
          class="supports">
          <li
            v-for="(item, index) in seller.supports"
            :key="index"
            class="supports-item">
                <span
                  class="icon"
                  :class="classMap[seller.supports[index].type]"></span>
            <span class="text">{{seller.supports[index].description}}</span>
          </li>
        </ul>
      </div>
      <split></split>
      <div class='pics'>
        <h1 class='title'>商家实景</h1>
        <div class='pic-wrapper' ref='pic'>
          <ul class='pic-list' ref='picList'>
            <li class='pic-item' v-for='(pic,index) in seller.pics'>
              <img :src='pic' width='120' height='90'>
            </li>
          </ul>
        </div>
      </div>
      <split></split>
      <div class='info'>
        <h1 class='title'>商家信息</h1>
        <ul>
          <li class='info-item' v-for='(info,index) in seller.infos'>{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import star from '@/components/star/star'
import split from '@/components/split/split'
import {saveToLocal, loadFromLocal} from '@/common/js/store'

export default {
  components: {
    star,
    split,
  },
  props: {
    seller: {
      type: Object,
    },
  },
  data() {
    return {
      classMap: [],
      /*立即执行函数*/
      favorite1: (() => {
        return false
      })(),
      favorite: loadFromLocal(this.seller.id, 'favorite', false),
    }
  },
  watch: {
    seller() {
      console.log(this.seller)
      this._initScroll()
    },
  },
  computed: {},
  methods: {
    toggleFavorite() {
      this.favorite = !this.favorite
      saveToLocal(this.seller.id, 'favorite', this.favorite)
    },
    _initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true,
          })
        } else {
          this.scroll.refresh()
        }

      })
      if (this.seller.pics) {
        this.$refs.picList.style.width = this.seller.pics.length * (120 + 6) - 6 + 'px'
      }
      this.$nextTick(() => {
        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$refs.pic, {
            click: true,
            scrollX: true,
            eventPassthrough: 'vertical',
          })
        } else {
          this.picScroll.refresh()
        }
      })
    },
  },
  created() {
  },
  mounted() {
    this.classMap = ['decrease', 'discount', 'invoice', 'guarantee', 'special']
    this._initScroll()
  },
}
</script>
<style lang="stylus" scoped>
  .seller
    position absolute
    top: 174px
    bottom 0
    left 0
    width 100%
    overflow hidden
    .seller-content
      .overview
        position relative
        padding 18px
        .title
          margin-bottom 8px
          line-height 14px
          font-size 14px
          color rgb(7, 17, 27)
        .desc
          padding-bottom 18px
          border-1px(rgba(7, 17, 27, 0.1))
          font-size 0
          .star
            display inline-block
            vertical-align top
            margin-right 8px
            line-height 18px
          .text
            display inline-block
            vertical-align top
            line-height 18px
            margin-right 12px
            font-size 10px
            color rgb(77, 85, 93)
        .remark
          display flex
          padding-top 18px
          .block
            flex 1
            text-align center
            border-right 1px solid rgba(7, 17, 27, 0.1)
            box-sizing border-box
            &:last-child
              border-right none
            h2
              margin-bottom 4px
              line-height 10px
              font-size 10px
              color rgb(147, 153, 159)
            .content
              font-size 10px
              line-height 24px
              font-weight 200
              .stress
                font-size 24px
                font-weight 20
        .favorite
          position absolute
          top 18px
          right 5px
          width 50px
          .icon-favorite
            display block
            font-size 24px
            line-height 24px
            text-align center
            color gray
            &.active
              color red
          .text
            display block
            margin-top 4px
            text-align center
            font-size 10px
            line-height 10px
    .bulletin
      padding 18px 18px 0 18px
      .title
        margin-bottom 8px
        line-height 14px
        font-size 14px
        color rgb(7, 17, 27)
      .content-wrapper
        border-1px(rgba(7, 17, 27, 0.1))
        padding 0 12px 16px 12px
        .content
          line-height 24px
          font-size 12px
          color rgb(240, 20, 20)
      .supports
        .supports-item
          padding 16px 12px
          font-size 0px
          border-1px(rgba(7, 17, 27, 0.1))
          &:last-child
            border-none()
          .icon
            display inline-block
            vertical-align top
            width 16px
            height 16px
            background-size 16px 16px
            background-repeat no-repeat
            &.decrease
              bg-image('../header/decrease_1')
            &.discount
              bg-image('../header/discount_1')
            &.invoice
              bg-image('../header/invoice_1')
            &.guarantee
              bg-image('../header/guarantee_1')
            &.special
              bg-image('../header/special_1')
          .text
            display inline-block
            vertical-align top
            line-height 16px
            font-size 12px
            margin-left 12px
    .pics
      padding 18px
      .title
        margin-bottom 12px
        line-height 14px
        font-size 14px
        color rgb(7, 17, 27)
      .pic-wrapper
        width 100%
        overflow hidden
        white-space nowrap
        .pic-list
          font-size 0
          .pic-item
            display inline-block
            vertical-align top
            margin-right 6px
            width 120px
            height 90px
    .info
      padding 18px 18px 0 18px
      .title
        padding-bottom 12px
        line-height 14px
        font-size 14px
        color rgb(7, 17, 27)
        border-1px(rgba(7, 17, 27, 0.1))
      .info-item
        padding 16px 12px
        line-height 16px
        color rgb(7, 17, 27)
        border-1px(rgba(7, 17, 27, 0.1))

</style>
